<template>
  <Card style="min-height:800px">
    <Row>
      <Col span="12">
        <Card style="min-height:800px">
          <Form ref="searchData" :model="categorySearchData" :rules="ruleInline" label-colon autocomplete="off" style="min-height:80px">
            <Row style="height: 40px">
              <Col span="18">
                <FormItem  prop="name" label="类型名称" :label-width="80">
                  <label>
                    <Input v-model="categorySearchData.name" />
                  </label>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem style="float: right">
                  <Button type="primary" @click="categoryQueryData(true)"><Icon type="ios-search" />查询</Button>
                </FormItem>
              </Col>
            </Row>
            <permission-button-group @handleEvent="handleEvent" permission-code-prefix="dictionaryCategory_"/>
          </Form>
          <div>
            <scroll height="650">
              <Table :highlight-row="true" :columns="categoryColumnsData" :data="categoryResultData" @on-current-change="categorySelect" @on-selection-change="categorySelectItem" />
            </scroll>
          </div>
          <div class="ivu-mt ivu-text-center">
            <Page :total="categoryPager.total" :current="categoryPager.current" show-elevator @on-change="categoryPageChange" @on-page-size-change="categoryPageSizeChange" :show-sizer="true"/>
          </div>
          <dictionary-category-details :title="modalTitle" :show="showCategoryModal" :can-edit="canEdit" :show-data="categoryModalData" @callbackByCancel="categoryCallbackByCancel" @callbackByOk="categoryCallbackByOk"/>
        </Card>
      </Col>

      <Col span="12">
        <Card style="min-height:800px">
          <Form ref="searchData" :model="searchData" :rules="ruleInline" label-colon autocomplete="off" style="min-height:80px">
            <Row style="height: 40px">
              <Col span="8">
                <FormItem  prop="name" label="名称" :label-width="50">
                  <label>
                    <Input v-model="searchData.name" />
                  </label>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem  prop="code" label="代码" :label-width="50">
                  <label>
                    <Input v-model="searchData.code" />
                  </label>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem style="margin-left: 2em">
                  <Button type="primary" @click="queryData(true)"><Icon type="ios-search" />查询</Button>
                </FormItem>
              </Col>
            </Row>
            <permission-button-group v-show="searchData.codeType" @handleEvent="handleEvent" permission-code-prefix="dictionary_"/>
          </Form>

          <div>
            <scroll height="650">
            <Table row-key="id" border ref="selection" :columns="columnsData" :data="resultData" @on-selection-change="selectItem" />
            </scroll>
          </div>
          <div class="ivu-mt ivu-text-center">
            <Page :total="pager.total" :current="pager.current" show-elevator @on-change="pageChange" @on-page-size-change="pageSizeChange" :show-sizer="true"/>
          </div>
          <dictionary-details :title="modalTitle" :code-type="searchData.codeType" :is-tree="isTree" :show="showModal" :can-edit="canEdit" :show-data="modalData"
                              :reload-data="true" @callbackByCancel="callbackByCancel" @callbackByOk="callbackByOk"/>
        </Card>
      </Col>
    </Row>
  </Card>
</template>

<script>
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {search,getAllCodeTypeTree,deleteData} from '@/api/dictionaryApi'
import {categorySearch,categoryDeleteData} from '@/api/dictionaryCategoryApi'
import DictionaryDataProvider from '@/views/settings/data/DictionaryDataProvider'
import DictionaryDetails from '@/views/settings/dictionary/components/dictionary-details'
import DictionaryCategoryDetails from '@/views/settings/dictionary/components/dictionary-category-details'
import PermissionButtonGroup from "@/components/permissionButton/permission-button-group"
export default {
  components: {
    DictionaryDetails,
    DictionaryCategoryDetails,
    TreeSelect,
    PermissionButtonGroup
  },
  data () {
    return {
      showModal: false,
      showCategoryModal: false,
      modalTitle: '添加系统字典',
      canEdit: false,
      selectItems: [],
      categorySelectItems:[],
      dictionaryTrees:[],
      modalData:DictionaryDataProvider.createDictionaryVo(),
      categoryModalData:DictionaryDataProvider.createDictionaryCategoryVo(),
      searchData:DictionaryDataProvider.createSearchData(),
      isTree: 0,
      categorySearchData:{
        name: ''
      },
      pager:{
        size:10,
        current: 1,
      },
      categoryPager:{
        size:10,
        current: 1,
      },
      ruleInline: {

      },
      resultData: [],
      categoryResultData: [],
      columnsData: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          key: 'name',
          align: 'center',
          tree: true
        },
        {
          title: '代码',
          key: 'code',
          align: 'center'
        },
        {
          title: '状态',
          key: 'valid',
          align: 'center',
          render: (h, params) => {
            if (params.row.valid === 1) {
              return h('Tag', {props: {color: 'blue'}}, '正常');
            }
            return h('Tag', {props: {color: 'warning'}}, '禁用');
          }
        },
      ],
      categoryColumnsData: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '类型名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '类型代码',
          key: 'codeType',
          align: 'center'
        },
        {
          title: '树形',
          key: 'isTree',
          align: 'center',
          render: (h, params) => {
            if (params.row.isTree===1){
              return h('span','是')
            }else {
              return h('span','否')
            }
          }
        },
        {
          title: '状态',
          key: 'valid',
          width: 100,
          align: 'center',
          render: (h, params) => {
            if (params.row.valid === 1) {
              return h('Tag', {props: {color: 'blue'}}, '正常');
            }
            return h('Tag', {props: {color: 'warning'}}, '禁用');
          }
        }
      ]

    }
  },
  created(){

  },
  mounted(){
    this.categoryQueryData()
    getAllCodeTypeTree().then(res=>{
      this.dictionaryTrees = res
    })
  },
  methods: {
    handleReset (name) {
      this.$refs[name].resetFields();
    },
    pageChange(page){
      this.pager.current = page
      this.queryData()
    },
    pageSizeChange(pageSize){
      this.pager.size = pageSize
      this.pager.current = 1
      this.queryData()
    },
    categoryPageChange(page){
      this.categoryPager.current = page
      this.categoryQueryData()
    },
    categoryPageSizeChange(pageSize){
      this.categoryPager.size = pageSize
      this.categoryPager.current = 1
      this.categoryQueryData()
    },
    queryData(isSearch){
      if (isSearch){
        this.pager.current = 1
      }
      search({
        pager:this.pager,
        queryData:this.searchData
      }).then( res => {
        this.resultData = res.records
        this.pager.total = res.total
      })
    },
    categoryQueryData(isSearch){
      if (isSearch){
        this.categoryPager.current = 1
      }
      categorySearch({
        pager:this.categoryPager,
        queryData:this.categorySearchData
      }).then( res => {
        this.categoryResultData = res.records
        this.categoryPager.total = res.total
      })
    },
    categorySelect(currentRow){
      this.searchData.codeType= currentRow.codeType;
      this.isTree = currentRow.isTree;
      this.queryData(true)
    },
    callbackByCancel () {
      this.showModal = false
    },
    callbackByOk(){
      this.showModal = false
      this.queryData()
    },
    categoryCallbackByCancel () {
      this.showCategoryModal = false
    },
    categoryCallbackByOk(){
      this.showCategoryModal = false
      this.categoryQueryData()
    },
    selectItem(row){
      this.selectItems = row
    },
    categorySelectItem(row){
      this.categorySelectItems = row
    },
    handleEvent(event){
      if (event.startsWith('dictionary_')){
        if (event==='dictionary_add'){
          this.modalTitle = '添加系统字典'
          this.canEdit = true
          this.modalData = DictionaryDataProvider.createDictionaryVo()
          this.showModal = true
        }else{
          if (this.selectItems.length===0){
            this.$Message.error('请先选择数据，后操作！')
            return}
          if (event ==='dictionary_view'||event ==='dictionary_edit'){
            this.canEdit = event !== 'dictionary_view'
            this.modalTitle = '系统字典'
            this.modalData = this.selectItems[0]
            this.showModal = true
          }
          if (event ==='dictionary_delete'){
            let ids = []
            this.selectItems.forEach((item) => {
              ids.push(item.id)
            })
            deleteData(ids).then(()=>{
              this.$Message.success('删除成功！')
              this.queryData()
            })
          }
        }
      }else{
        if (event==='dictionaryCategory_add'){
          this.modalTitle = '添加系统字典类型'
          this.canEdit = true
          this.categoryModalData = DictionaryDataProvider.createDictionaryCategoryVo()
          this.showCategoryModal = true
        }else{
          if (this.categorySelectItems.length===0){
            this.$Message.error('请先选择数据，后操作！')
            return}
          if (event ==='dictionaryCategory_view'||event ==='dictionaryCategory_edit'){
            this.canEdit = event !== 'dictionaryCategory_view'
            this.modalTitle = '系统字典类型'
            this.categoryModalData = this.categorySelectItems[0]
            this.showCategoryModal = true
          }
          if (event ==='dictionaryCategory_delete'){
            let ids = []
            this.categorySelectItems.forEach((item) => {
              ids.push(item.id)
            })
            categoryDeleteData(ids).then(()=>{
              this.$Message.success('删除成功！')
              this.categoryQueryData()
            })
          }
        }
      }

    }
  }
}
</script>

<style scoped>

</style>